<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <!-- 可选的Bootstrap主题文件（一般不用引入） -->
    <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap-theme.min.css">
    <!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
    <script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="http://cdn.bootcss.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
    <style>
        *{ font-size: 12px; margin: 0 auto; padding: 0;}
        ul{ list-style-type: none;}
        a{ cursor: pointer;}
        .left{ float: left;}
        .right{ float: right;}
        .hidden{ display: none;}
        .clear{ clear: both;}

        .header{ background-color: #f5f5f5; height:36px;width: 100%;   border-bottom: 1px solid #eee;}
        .site-nav{ width:1200px; color:#666; line-height: 36px;}
        .site-nav-l  li{ display: inline-block; padding-right: 10px;}
        .site-nav-l  li a.site-login,.site-nav a:hover{ color: #f60;}
        .site-nav-l  li span{ padding-left: 10px;}
        .site-nav-r li{ display: inline-block; position: relative;}
        .site-nav-r li span{ padding:0 10px;}
        .site-nav-r li.site-nav-dropdown{ border:1px solid #f5f5f5;border-bottom: none;}
        .site-nav-hover{ background: #fff;border:1px solid #eee; border-bottom: none; border-top:#fff;}
        .site-content .site-content-li{ position: absolute; width: 90px; background: #fff; border:1px solid #f4f4f4; border-top:none; line-height: 26px; margin-left: -1px; padding:5px 0;}
        .site-content .site-content-li  li { padding: 2px 5px;}
        .site-content .site-content-li li:hover{ background: #f6f6f6; width: 80px;}
        .site-content .site-content-li li a:hover{ color: #666;}

        .site-nav-menu{ width:1200px; position: absolute; right:0;border-bottom:1px solid #eee;}
        .site-nav-menu .site-nav-menu-l{  border-right:1px solid #eee;}
        .site-nav-menu .site-nav-menu-l h4{ font-size: 16px; font-weight: bold;}
        .site-nav .site-nav-menu .site-nav-menu-l ul li{ display: inline-block; width:70px;line-height: 24px !important; height: 24px !important;}
        .site-nav-menu-one{ width:300px;}
        .site-nav-menu-two{ margin-left: 20px; width:278px;}

    </style>

</head>
<body>
<div class="header">
    <div class="site-nav">
        <ul class="site-nav-l left">
            <li><a class="site-login">亲，请登录</a><span><a>免费注册</a></span></li>
            <li><a>手机逛淘宝</a></li>
        </ul>
        <ul class="site-nav-r right">
            <li class="site-nav-dropdown">
                <a><span>我的淘宝</span></a>
                <div class="site-content hidden">
                    <ul class="site-content-li">
                        <li><a>已买到的宝贝</a></li>
                        <li><a>我的足迹</a></li>
                    </ul>
                </div>
            </li>
            <li><a><span>购物车</span></a></li>
            <li class="site-nav-dropdown">
                <a><span>收藏夹</span></a>
                <div class="site-content hidden">
                    <ul  class="site-content-li">
                        <li><a>收藏的宝贝</a></li>
                        <li><a>收藏的店铺</a></li>
                    </ul>
                </div>
            </li>
            <li><a><span>商品分类</span></a></li>
            <li class="site-nav-dropdown">
                <a><span>卖家中心</span></a>
                <div class="site-content hidden">
                    <ul  class="site-content-li">
                        <li><a>免费开店</a></li>
                        <li><a>已卖出的宝贝</a></li>
                        <li><a>出售中的宝贝</a></li>
                        <li><a>卖家服务市场</a></li>
                        <li><a>卖家培训中心</a></li>
                        <li><a>体检中心</a></li>
                    </ul>
                </div>
            </li>
            <li class="site-nav-dropdown">
                <a><span>联系客服</span></a>
                <div class="site-content hidden">
                    <ul  class="site-content-li">
                        <li><a>消费者客服</a></li>
                        <li><a>卖家客服</a></li>
                    </ul>
                </div>
            </li>
            <li class="site-nav-dropdown">
                <a><span>网站导航</span></a>
                <div class="site-content hidden">
                    <div class="site-nav-menu">
                      <div class="site-nav-menu-l site-nav-menu-one left">
                        <h4>主题市场</h4>
                        <ul>
                          <li><a>女装</a></li>
                          <li><a>男装</a></li>
                          <li><a>内衣</a></li>
                          <li><a>鞋靴</a></li>
                          <li><a>箱包</a></li>
                          <li><a>女装</a></li>
                          <li><a>婴童</a></li>
                          <li><a>家电</a></li>
                          <li><a>数码</a></li>
                          <li><a>手机</a></li>
                          <li><a>女装</a></li>
                          <li><a>男装</a></li>
                          <li><a>内衣</a></li>
                          <li><a>鞋靴</a></li>
                          <li><a>箱包</a></li>
                          <li><a>女装</a></li>
                          <li><a>男装</a></li>
                          <li><a>内衣</a></li>
                          <li><a>鞋靴</a></li>
                          <li><a>箱包</a></li>
                          <li><a>女装</a></li>
                          <li><a>婴童</a></li>
                          <li><a>家电</a></li>
                          <li><a>数码</a></li>
                          <li><a>手机</a></li>
                          <li><a>女装</a></li>
                          <li><a>男装</a></li>
                          <li><a>内衣</a></li>
                          <li><a>鞋靴</a></li>
                          <li><a>箱包</a></li>
                        </ul>
                      </div>
                      <div class="site-nav-menu-l site-nav-menu-two left">
                        <h4>主题市场</h4>
                        <ul>
                          <li><a>iFashion</a></li>
                          <li><a>爱逛街</a></li>
                          <li><a>美妆秀</a></li>
                          <li><a>全球购</a></li>
                          <li><a>腔调</a></li>
                          <li><a>淘女郎</a></li>
                          <li><a>星店</a></li>
                          <li><a>汇吃</a></li>
                          <li><a>格调</a></li>
                          <li><a>运动派</a></li>
                          <li><a>极有家</a></li>
                          <li><a>男装</a></li>
                          <li><a>内衣</a></li>
                          <li><a>鞋靴</a></li>
                          <li><a>箱包</a></li>
                          <li><a>女装</a></li>
                          <li><a>男装</a></li>
                          <li><a>内衣</a></li>
                          <li><a>鞋靴</a></li>
                          <li><a>箱包</a></li>
                          <li><a>女装</a></li>
                          <li><a>婴童</a></li>
                          <li><a>家电</a></li>
                        </ul>
                      </div>
                      <div class="site-nav-menu-l site-nav-menu-two left">
                        <h4>主题市场</h4>
                        <ul>
                          <li><a>女装</a></li>
                          <li><a>男装</a></li>
                          <li><a>内衣</a></li>
                          <li><a>鞋靴</a></li>
                          <li><a>箱包</a></li>
                          <li><a>女装</a></li>
                          <li><a>婴童</a></li>
                          <li><a>家电</a></li>
                          <li><a>数码</a></li>
                          <li><a>手机</a></li>
                          <li><a>女装</a></li>
                          <li><a>男装</a></li>
                          <li><a>内衣</a></li>
                          <li><a>鞋靴</a></li>
                          <li><a>箱包</a></li>
                          <li><a>女装</a></li>
                          <li><a>男装</a></li>
                          <li><a>内衣</a></li>
                          <li><a>鞋靴</a></li>
                          <li><a>箱包</a></li>
                          <li><a>女装</a></li>
                          <li><a>婴童</a></li>
                          <li><a>家电</a></li>
                          <li><a>数码</a></li>
                          <li><a>手机</a></li>
                          <li><a>女装</a></li>
                          <li><a>男装</a></li>
                          <li><a>内衣</a></li>
                          <li><a>鞋靴</a></li>
                          <li><a>箱包</a></li>
                        </ul>
                      </div>
                      <div class="site-nav-menu-l site-nav-menu-two left" style="width:280px;">
                        <h4>主题市场</h4>
                        <ul>
                          <li><a>女装</a></li>
                          <li><a>男装</a></li>
                          <li><a>内衣</a></li>
                          <li><a>鞋靴</a></li>
                          <li><a>箱包</a></li>
                          <li><a>女装</a></li>
                          <li><a>婴童</a></li>
                          <li><a>家电</a></li>
                          <li><a>数码</a></li>
                          <li><a>手机</a></li>
                          <li><a>女装</a></li>
                          <li><a>男装</a></li>
                          <li><a>内衣</a></li>
                          <li><a>鞋靴</a></li>
                          <li><a>箱包</a></li>
                          <li><a>女装</a></li>
                          <li><a>男装</a></li>
                          <li><a>内衣</a></li>
                          <li><a>鞋靴</a></li>
                          <li><a>箱包</a></li>
                          <li><a>女装</a></li>
                          <li><a>婴童</a></li>
                          <li><a>家电</a></li>
                          <li><a>数码</a></li>
                          <li><a>手机</a></li>
                          <li><a>女装</a></li>
                          <li><a>男装</a></li>
                          <li><a>内衣</a></li>
                          <li><a>鞋靴</a></li>
                          <li><a>箱包</a></li>
                        </ul>
                      </div>
                    </div>
                </div>
            </li>

        </ul>
    </div>
  <i class="clear"></i>
</div>
<script>

    $(".site-nav-r").on("mouseover","li",function(){
        var _self = $(this);
        if(_self.hasClass("site-nav-dropdown")){
            _self.addClass("site-nav-hover");
        }
        _self.children(".site-content").removeClass("hidden");
    });
    $(".site-nav-r").on("mouseout","li",function(){
        var _self = $(this);
        if(_self.hasClass("site-nav-dropdown")){
            _self.removeClass("site-nav-hover");
        }
        _self.children(".site-content").addClass("hidden");
    })
</script>
</body>
</html>